<!-- src/components/Counter.vue -->
<template>
  <view class="counter">
    <button @click="handleGetRequest">发送GET请求</button>
    <button @click="handlePostRequest">发送POST请求</button>

    <view v-if="loading">加载中...</view>
    <view v-if="error" class="error">{{ error }}</view>
    <view v-if="responseData">
      <text>{{ JSON.stringify(responseData) }}</text>
    </view>
  </view>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue'

import {testApi} from '../services/api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const loading = ref(false)
    const error = ref('')
    const responseData = ref<any>(null)

    const handleGetRequest = async () => {
      console.log("测试GET接口")
      loading.value = true
      error.value = ''
      try {
        responseData.value = await axios.get('http://localhost:9002/example/xxx/list')
        console.log(responseData)
      } catch (err) {
        error.value = err.message || '请求失败'
      } finally {
        loading.value = false
      }
    }

    const handlePostRequest = async () => {
      loading.value = true
      error.value = ''
      try {
        responseData.value = await testApi.postTestData({
          name: '测试数据',
          value: Date.now()
        })
      } catch (err) {
        error.value = err.message || '提交失败'
      } finally {
        loading.value = false
      }
    }

    return {
      loading,
      error,
      responseData,
      handleGetRequest,
      handlePostRequest
    }
  }
})
</script>

<style>
.counter {
  padding: 20px;
}

button {
  margin: 10px 0;
  padding: 10px;
  background-color: #2908f9;
  color: white;
}

.error {
  color: red;
  margin-top: 10px;
}
</style>

